{% extends 'base_dashboard.html' %}
{% load site_tags %}

{% block title %}Pay certification fee — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-8">
    <h4 class="fw-bold mb-1">
      {% if payment_kind == 'reattempt' %}Pay reattempt fee{% else %}Pay certification fee{% endif %}
    </h4>
    <p class="text-muted small mb-3">
      {{ program.title }} ·
      {% if application.promo_code %}
        <span class="text-decoration-line-through">{% format_price list_price %}</span>
        <strong class="text-success">{% format_price amount_due %}</strong>
        <span class="badge text-bg-success">{{ application.promo_code.code }}</span>
      {% else %}
        {% format_price amount_due %}
      {% endif %}
    </p>

    {% if payment_kind == 'reattempt' %}
    <div class="alert alert-warning border-0 small">
      You scored below {{ program.passing_score }}%. Pay the reattempt fee to try again
      ({{ application.attempts_remaining }} attempt{{ application.attempts_remaining|pluralize }} left).
    </div>
    {% endif %}

    {% if application.payment_rejection_reason %}
    <div class="alert alert-danger border-0 small">
      <strong>Previous payment proof was rejected.</strong>
      {{ application.payment_rejection_reason }}
      Please upload a clear new screenshot below.
    </div>
    {% endif %}

    <div class="card border-0 shadow-sm rounded-4 mb-3">
      <div class="card-body p-3">
        <div class="fw-semibold small mb-2"><i class="bi bi-tag me-1"></i>College / university promo code</div>
        {% if application.promo_code %}
          <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div class="small">
              Applied <strong class="font-monospace">{{ application.promo_code.code }}</strong>
              for {{ application.promo_code.institute_name }}
              ({{ application.promo_code.discount_label }} · saved {% format_price application.discount_amount %})
            </div>
            <form method="post" action="{% url 'certifications:clear_promo' application.pk %}">
              {% csrf_token %}
              <button class="btn btn-sm btn-outline-secondary">Remove</button>
            </form>
          </div>
        {% else %}
          <form method="post" action="{% url 'certifications:apply_promo' application.pk %}" class="row g-2 align-items-end">
            {% csrf_token %}
            <div class="col-md-8">
              <input type="text" name="code" class="form-control text-uppercase" placeholder="Enter promo code" required>
            </div>
            <div class="col-md-4">
              <button class="btn btn-outline-primary w-100">Apply</button>
            </div>
          </form>
        {% endif %}
      </div>
    </div>

    <div class="row g-3">
      {% if stripe_enabled %}
      <div class="col-md-{% if manual_enabled %}6{% else %}12{% endif %}">
        <div class="card border-0 shadow-sm rounded-4 h-100">
          <div class="card-body p-4">
            <h6 class="fw-bold">Pay with Stripe</h6>
            <p class="small text-muted">Instant confirmation after successful payment.</p>
            <form method="post" action="{% url 'certifications:stripe_checkout' application.pk %}">
              {% csrf_token %}
              <button class="btn btn-primary w-100">Pay {% format_price amount_due %}</button>
            </form>
          </div>
        </div>
      </div>
      {% endif %}

      {% if manual_enabled %}
      <div class="col-md-{% if stripe_enabled %}6{% else %}12{% endif %}">
        <div class="card border-0 shadow-sm rounded-4 h-100">
          <div class="card-body p-4">
            <h6 class="fw-bold">Manual payment</h6>
            {% if site.manual_payment_instructions %}
              <div class="small mb-3 p-2 rounded-3" style="background:#fffbeb;white-space:pre-line;">{{ site.manual_payment_instructions }}</div>
            {% endif %}
            <form method="post" enctype="multipart/form-data">
              {% csrf_token %}
              <div class="mb-3">
                <label class="form-label small fw-semibold">Payment proof</label>
                {{ form.payment_proof }}
              </div>
              <div class="mb-3">
                <label class="form-label small fw-semibold">Note</label>
                {{ form.payment_note }}
              </div>
              <button class="btn btn-outline-primary w-100">Submit proof</button>
            </form>
          </div>
        </div>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}